<!-- 实名认证 -->
<template>
	<view class="authentication-box">
		<view class="authentication-item-main" :class="item.RealType == 1 ? 'authentication-item-main-girl' : ''"
			v-for="item in state.authList" :key="item.id">
			<view class="authentication-item">
				<view class="authentication-item-left">
					<img :src="item.imgSrc" alt="">
				</view>
				<view class="authentication-item-right">
					<view class="authentication-item-title">{{item.name}}</view>
					<van-button type="primary" @click="authFn(item)">{{item.RealState==1?'已认证':'去认证'}}</van-button>
				</view>
			</view>
			<view class="authentication-item-content-bottom">
				<view class="authentication-item-content">
					通过真人认证可获得以下特权
				</view>
				<view class="authentication-item-bottom">
					<view class="authentication-item-bottom-item" v-for="itemChild in item.imgList"
						:key="itemChild.name">
						<img :src="itemChild.icon" alt="">
						<view class="authentication-item-bottom-item-text">{{itemChild.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"

	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 认证状态
	// 认证类型：RealType:0.真人认证，1.女神认证  获取认证状态：realState：0.认证中，1.认证成功，2.认证失败，3.撤销认证  默认值:

	import a1 from "@/assets/image/icon100.png"
	import a2 from "@/assets/image/icon101.png"
	import a3 from "@/assets/image/icon93.png"

	import b1 from "@/assets/image/icon92.png"
	import b2 from "@/assets/image/icon98.png"
	import b3 from "@/assets/image/icon93.png"

	import c1 from "@/assets/image/icon99.png"
	import c2 from "@/assets/image/icon95.png"
	import c3 from "@/assets/image/icon94.png"

	import bg1 from "@/assets/image/icon96.png"
	import bg2 from "@/assets/image/icon97.png"

	const state = reactive({
		authenticationList: [{
				id: 1,
				name: "真人认证",
				RealType: 0,
				RealState: 0,
				sex: 0,
				imgSrc: bg1,
				imgList: [{
						icon: a1,
						name: '优先推荐'
					},
					{
						icon: a2,
						name: '诚信交友'
					},
					{
						icon: a3,
						name: '认证标识'
					}
				]
			},
			{
				id: 2,
				name: "真人认证",
				"RealType": 0,
				"RealState": 0,
				sex: 1,
				imgSrc: bg1,
				imgList: [{
						icon: a1,
						name: '优先推荐'
					},
					{
						icon: a2,
						name: '诚信交友'
					},
					{
						icon: a3,
						name: '认证标识'
					}
				]
			},
			{
				id: 3,
				name: "女神认证",
				"RealType": 1,
				"RealState": 0,
				sex: 0,
				imgSrc: bg2,
				imgList: [{
						icon: c1,
						name: '红包照片'
					},
					{
						icon: c2,
						name: '更多曝光'
					},
					{
						icon: c3,
						name: '认证标识'
					}
				]
			}
		],
	})

	onLoad((options) => {

	})

	onMounted(() => {
		UserRealAuthFn()
		let userInfo = JSON.parse(getAuthorization("userInfo"));
		state.sex = userInfo.Sex;
		state.authList = state.authenticationList.filter(o => o.sex == state.sex);
	})

	const authenticationVideo = () => {
		uni.navigateTo({
			url: '/pages/home/person/authentication/authenticationVideo/index'
		})
	}

	const authenticationGirl = () => {
		uni.navigateTo({
			url: '/pages/home/person/authentication/authenticationGirl/index'
		})
	}

	const authFn = (item) => {
		let {
			RealType
		} = item
		if (RealType == 0) authenticationVideo()
		if (RealType == 1) authenticationGirl()
	}
	const {
		proxy
	} = getCurrentInstance();
	import {
		UserRealAuth
	} from "@/api/person/index.js"

	const UserRealAuthFn = async () => {
		let data = await proxy.$get(UserRealAuth)
		if (data.code == 200) {
			setAuthorization("UserRealAuth", data.data);
			let obj = {};
			for (let item of data.data) {
				obj[item.RealType] = item.RealState;
			}
			// 更新数据列表
			state.authList = state.authList.map((item) => {
				return {
					...item,
					RealState: obj[item.RealType]
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.authentication-box {
		padding-top: 30rpx;
		background: #F7F8F9;
		min-height: calc(100vh - 90rpx);
		box-sizing: border-box;
	}

	.authentication-item-main {
		width: calc(100% - 60rpx);
		margin: 0 auto;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.authentication-item {
		min-height: 138rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: url("@/assets/image/bg1.png") no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.authentication-item-left {
			width: 218rpx;
			height: 210rpx;

			img {
				width: 100%;
			}
		}

		.authentication-item-right {
			.authentication-item-title {
				font-size: 48rpx;
				font-weight: 600;
				color: #000000;
			}

			.van-button {
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				margin-top: 20rpx;
			}
		}

	}

	.authentication-item-content-bottom {
		.authentication-item-content {
			text-align: center;
			height: 42rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #262626;
			line-height: 42rpx;
			margin-top: 30rpx;
		}

		.authentication-item-bottom {
			display: flex;
			padding: 20rpx;

			.authentication-item-bottom-item {
				text-align: center;
				width: 33.33%;
			}

			img {
				width: 92rpx;
				height: 92rpx;
			}

			.authentication-item-bottom-item-text {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.authentication-item-main-girl .authentication-item {
		background: url("@/assets/image/bg2.png") no-repeat;
		background-size: 100%;
	}
</style>
